<template>
  <a-row class="task_box" v-if="visible">
    <a-col :span="24" class="task_btn_box">
      <div>
        <div @click="addFacility()" class="addFacilitis">+ 添加设施</div>
        <div class="addFacilitis">直接填报</div>
      </div>
      <div>
        <div class="addFacilitis">暂存</div>

        <div class="addFacilitis">发布任务</div>
      </div>
    </a-col>
    <a-col
      :span="24"
      style="padding: 0 10px"
      v-if="!(computeScopedOneLength != 0 || computeScopedTwoLength != 0)"
    >
      <div class="noData">暂无数据,请添加设施或凭证</div>
    </a-col>
    <!-- 范围一 -->
    <a-col :span="8" class="facilitis" v-if="computeScopedOneLength != 0">
      <div
        class="scoped_box"
        :style="{
          'background-image': `linear-gradient(rgba(252, 220, 208, 1),rgba(253, 243, 242, .3))`,
        }"
      >
        <div class="scoped_title">范围一:直接排放</div>

        <a-tooltip
          placement="topLeft"
          title="指每一个拥有或控制的排放源产生的直接温室气体排放"
        >
          <i
            class="iconfont icon-bangzhu"
            style="color: #666; font-size: 18px; margin-left: 2px"
          ></i>
        </a-tooltip>
      </div>
      <!--  -->
      <div v-for="(item, index) in scopedOne" :key="index">
        <div class="facilitis_boundary_box" v-if="item.facilityList.length > 0">
          <div class="boundary_header">
            <div class="icon" :style="{ background: item.background }">
              <i class="iconfont" :class="item.iconfont"></i>
            </div>
            <div class="title">{{ item.title }}</div>
          </div>
          <ul>
            <li v-for="k in item.facilityList" :key="k.id">
              <div>{{ k.facilitiesName }}</div>
              <i
                class="iconfont icon-guanbi"
                style="font-size: 14px; color: rgb(190, 190, 190)"
              ></i>
            </li>
          </ul>
        </div>
      </div>
    </a-col>
    <a-col :span="8" class="facilitis" v-if="computeScopedTwoLength != 0">
      <div
        class="scoped_box"
        :style="{
          'background-image': `linear-gradient(rgba(254, 240, 223, 1),rgba(254, 240, 223, 1))`,
        }"
      >
        <div class="scoped_title">范围二:直接排放</div>

        <a-tooltip
          placement="topLeft"
          title="指一个组织所有消耗的外购电力,供热/制冷,或蒸汽自用而产生的简介温室气体排放"
        >
          <i
            class="iconfont icon-bangzhu"
            style="color: #666; font-size: 18px; margin-left: 2px"
          ></i>
        </a-tooltip>
      </div>
      <!--  -->
      <div v-for="(item, index) in scopedTwo" :key="index">
        <div class="facilitis_boundary_box" v-if="item.facilityList.length > 0">
          <div class="boundary_header">
            <div class="icon" :style="{ background: item.background }">
              <i class="iconfont" :class="item.iconfont"></i>
            </div>
            <div class="title">{{ item.title }}</div>
          </div>
          <ul>
            <li v-for="k in item.facilityList" :key="k.id">
              <div>{{ k.facilitiesName }}</div>
              <i
                class="iconfont icon-guanbi"
                style="font-size: 14px; color: rgb(190, 190, 190)"
              ></i>
            </li>
          </ul>
        </div>
      </div>
    </a-col>
    <!-- <TaskCopy></TaskCopy> -->
    <ReleaseTask ref="releaseTask"></ReleaseTask>
    <AddTask ref="addTaskModal" @ok="getFacilities"></AddTask>
  </a-row>
</template>

<script>
// import { ListMixin } from "@/mixins/ListMixin";
import AddTask from "./Task/addTask.vue";
import TaskCopy from "./TaskCopy.vue";
import Preview from "./Task/Preview.vue";
import ReleaseTask from "./Task/ReleaseTask.vue";
export default {
  // mixins: [ListMixin],
  data() {
    return {
      showPreview: false,
      queryParam: {
        standard: "1",
        period: "",
      },
      visible: false,
      scopedOne: [
        {
          iconfont: "icon-jianzhuanquan-",
          title: "固定燃烧",
          facilityList: [],
          background: " #f74b4a",
        },
        {
          iconfont: "icon-yidong1",
          title: "移动燃烧",
          facilityList: [],
          background: " #f74b4a",
        },
        {
          iconfont: "icon-gongye",
          title: "工业排放过程",
          facilityList: [],
          background: " #f74b4a",
        },
        {
          iconfont: "icon-gongye",
          title: "散逸排放",
          facilityList: [],
          background: " #f74b4a",
        },
      ],
      scopedTwo: [
        {
          iconfont: "icon-zuoce-tongfengkongtiaoyucainuan-gaoliang",
          title: "采暖设施",
          facilityList: [],
          background: " #f8890d",
        },
        {
          iconfont: "icon-qingjingmoshitubiaojiudian_zhileng",
          title: "制冷设施",
          facilityList: [],
          background: " #f8890d",
        },
        {
          iconfont: "icon-yongdianliang",
          title: "用电设施",
          facilityList: [],
          background: " #f8890d",
        },
      ],
      mockData: [],
    };
  },
  components: {
    AddTask,
    TaskCopy,
    Preview,
    ReleaseTask,
  },
  mounted() {},
  computed: {
    computeScopedOneLength(val) {
      var scopedOneArr = this.scopedOne;
      var len = 0;
      for (var i = 0; i < scopedOneArr.length; i++) {
        //   console.log(len, scopedOneArr[i].facilityList.length);
        len += scopedOneArr[i].facilityList.length;
      }

      return len;
    },
    computeScopedTwoLength(val) {
      var scopedTwoArr = this.scopedTwo;
      var len = 0;
      for (var i = 0; i < scopedTwoArr.length; i++) {
        //   console.log(len, scopedTwoArr[i].facilityList.length);
        len += scopedTwoArr[i].facilityList.length;
      }

      return len;
    },
  },
  methods: {
    getFacilities() {
      let selectTarget = this.$refs.addTaskModal.targetKeys;
      let allFacilitiesList = this.$refs.addTaskModal.dataSource;
      this.mockData = allFacilitiesList.filter((item, index) => {
        if (index > 2) {
          item.scope = 1;
        } else {
          item.scope = 2;
        }
        return selectTarget.includes(item.key);
      });
      this.mockData.forEach((item) => {
        if (item.scope == 1 && item.classify == 1) {
          this.scopedOne[0].facilityList.push(item);
        }
        if (item.scope == 1 && item.classify == 2) {
          this.scopedOne[1].facilityList.push(item);
        }
        if (item.scope == 1 && item.classify == 3) {
          this.scopedOne[2].facilityList.push(item);
        }
        if (item.scope == 2 && item.classify == 1) {
          this.scopedTwo[0].facilityList.push(item);
        }
        if (item.scope == 2 && item.classify == 2) {
          this.scopedTwo[1].facilityList.push(item);
        }
        if (item.scope == 2 && item.classify == 3) {
          this.scopedTwo[2].facilityList.push(item);
        }
      });
    },
    releaseTask() {
      this.$refs.releaseTask.visible = true;
    },
    close() {
      this.showPreview = false;
    },
    generatinAaccountingTaskFun() {
      this.showPreview = true;
    },
    addFacility() {
      this.$refs.addTaskModal.visible = true;
    },
    openFacilityFun(accountingIndx, facilityIdx) {
      this.accountingTaskData[accountingIndx].itemAccounting[
        facilityIdx
      ].isShow =
        !this.accountingTaskData[accountingIndx].itemAccounting[facilityIdx]
          .isShow;
    },
    deleteFacilityObj(scopeIdx, accountingIndx, facilityIdx) {
      this.accountingTaskData[scopeIdx].itemAccounting[
        accountingIndx
      ].facilityList.splice(facilityIdx, 1);
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/css/scrollbar.scss";

.task_box {
  // background: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100%;
  padding: 10px 10px;
  width: 100%;
  background: #fff;
  overflow-y: hidden;
  .task_btn_box {
    display: flex;
    justify-content: space-between;
    div{
      display: flex;
    }
    .addFacilitis {
      text-align: right;
      padding: 6px 12px;
      margin-left: 10px;
      border-radius: 5px;
      background: #006eff;
      color: #fff;
      width: fit-content;
      margin-bottom: 10px;
      transition: 0.2s;
      cursor: pointer;
      font-size: 12px;
      box-shadow: 2px 2px 6px #ccc;
      &:hover {
        transition: 0.2s;
        opacity: 0.75;
        cursor: pointer;
      }
    }
  }
  .noData {
    font-size: 16px;
    font-weight: 600;
    padding: 30px 0;
    color: #999;
  }
  .facilitis {
    padding: 0 10px;

    .scoped_box {
      display: flex;
      padding-left: 12px;
      height: 46px;
      align-items: center;
      .scoped_title {
        font-weight: 600;
      }
    }
    .facilitis_boundary_box {
      margin: 4px 8px;

      padding: 26px;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      border-bottom: 1px solid rgb(235, 235, 235);
      justify-content: space-between;
      box-shadow: 0px 4px 11px rgb(218, 218, 218);
      .boundary_header {
        width: 120px;
        .title {
          margin-top: 18px;
          text-align: left;
          font-weight: 600;
        }
        .icon {
          position: relative;
          width: 50px;
          height: 50px;
          border-radius: 5px;
          box-shadow: 2px 10px 10px rgba(250, 71, 71, 0.2);
          // background: rgba(250, 71, 71, 1);
          display: flex;
          align-items: center;
          justify-content: center;
          i {
            color: #fff;
            font-size: 32px;
          }
          ::before {
            position: absolute;
            top: 13px;
            left: 2px;
          }
          ::after {
            filter: blur(1.5px); /*滤镜*/
            position: absolute;
            width: 100%;
            height: 100%;
            left: -8px;
            top: 8px;
            content: "";
            background: rgba(255, 255, 255, 0.5);
            border-radius: 5px;
            border: 2px solid rgb(252, 250, 250);
            box-shadow: -4px 10px 10px rgba(250, 71, 71, 0.2);
          }
        }
      }
      ul {
        flex: 1;
        li {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          border-bottom: 1px dashed rgb(240, 240, 240);
          div {
            font-size: 14px;
            color: #333;
            line-height: 26px;
          }
          i {
            color: rgb(190, 190, 190);
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>